<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 子传父</title>
    <style>
        .laoshu{
            background-color: aqua;
        }
        .cat{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <mymenu @pigtext='handle' :parr="parr" :title="title"></mymenu>
    </div>

    <script src="../Day1/js/vue.js"></script>

    <script>
        //子组件向父类传值基本用法
        //props:传递数据原则  单向数据流
        //子组件
        Vue.component('mymenu',{
            props:['parr','title'],
            data:function(){
                return{

                }
            },
            template:`<div>
                <h1>{{title}}</h1>
                <ul>
                    <li v-for='p in parr'>
                    {{p}}
                    </li>
                    <button @click='test'>子按钮</button>
                </ul>
                </div>`,
                methods:{
                    test(){
                        
                        //this.parr.push='小炮';
                        // this.title='哈哈哈哈哈哈哈哈哈' 自己传值没有用 会被父亲覆盖
                        //console.log(this.parr);
                        //通知父亲来修改变量
                        this.$emit('pigtext','v')
                    }
                }
        })
        //父
        var vm=new Vue({
            el:'#app',
            data:{
                parr:['timo','德玛西亚','js'],
                title:'你好,中国'
            },
            components:{
            },methods:{
                handle(a){
                    console.log("父方法");
                    this.title=a
                }
            }
        });
    </script>
</body>
</html>